import Vue from 'vue'
import employeesData from '@/api/constant/employees'
import { changeToValue } from '@/utils/index'
const directiveObj = {
  imgerror: {
    inserted(dom, obj) {
      // 1:图片加载 出错使用默认图片
      // 2：dom无src也使用默认图片
      // 3:指令给出一个图片地址，优先级高于默认图片
      dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
      dom.onerror = () => {
        // 图片加载出错
        dom.src = obj.value || require('@/assets/common/head.jpg')
      }
    },
    componentUpdated(dom, obj) {
      dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
    }
  },
  abc: {},
  xxx: {},
  // v-changeemployeesdata:枚举数据的字段名="值"
  changeemployeesdata: {
    // bind,inserted,update,componentUpdated,unbind
    // bind(dom,obj,vnode){dom:指令所在dom,obj:{属性，修饰符,值(value)},vnode:{context:指令所在组件的this}}
    inserted(dom, obj, vnode) {
      // console.log('obj', obj)
      dom.innerText = changeToValue(employeesData[obj.arg], obj.value)
    },
    componentUpdated(dom, obj, vnode) {
      dom.innerText = changeToValue(employeesData[obj.arg], obj.value)
    }
  }
}
// for in 全局注册自定义指令
// for (const key in directiveObj) {
//   Vue.directive(key, directiveObj[key])
// }
/*
 对象转数组
   Object.keys({a:1,b:2})===>['a','b']
   Object.values({a:1,b:2})===>[1,2]
   Object.entries({a:1,b:2})===>[['a',1],['b',2]]
*/

// Object.keys(directiveObj).forEach(key => {
//   Vue.directive(key, directiveObj[key])
// })
Object.entries(directiveObj).forEach(key => {
  Vue.directive(key[0], key[1])
})

// 全局自定义指令
// Vue.directive('imgerror', {
//   inserted(dom, obj) {
//     // 1:图片加载 出错使用默认图片
//     // 2：dom无src也使用默认图片
//     // 3:指令给出一个图片地址，优先级高于默认图片
//     dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
//     dom.onerror = () => {
//       // 图片加载出错
//       dom.src = obj.value || require('@/assets/common/head.jpg')
//     }
//   },
//   componentUpdated(dom, obj) {
//     dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
//   }
// })
// Vue.directive('abc', {})
